<template>
  <div>
     <h1>vue3的ts写法222</h1>
     <h1 @click="showMsg($event,'你好',88)">点击提示你好</h1>
     <div ref="myboxRef">这是一个div要获取</div>
     <input type="text" ref="myinpRef">
     <h1 id="myh1">哈哈哈</h1>
  </div>
</template>
<script setup lang="ts">
import {ref,computed,reactive,defineProps,defineEmits,   onActivated,onDeactivated} from 'vue'
  // 普通函数写法
  // Event 事件对象的ts 类型
  // void 表示没有返回值
  let showMsg=(e:Event,msg:string,age:number):void=>{      
      console.log(e)
     console.log(msg)
      console.log(age)
  }
  // 计算属性的ts写法 泛型写法
  let count=ref<number>(20)
  // computed<ts类型>(()=>{})
  let doubleCount=computed<number>(()=>{
      return count.value*2
  })

  // 获取html 元素的ts写法  HTML（具体标签名）Element
 let myboxRef=ref<HTMLDivElement|null>() //获取元素 要写成  类型| null
 let myinpRef=ref<HTMLInputElement|null>()
//   数据  as 类型  类型断言 告诉ts的检测机制 我能确定这个元素一定是某类型
 let myh1=document.getElementById("myh1") as HTMLHeadingElement

// defineProps的ts写法

// let props=defineProps({
//   myage:{
//     type:Number,
//   },
//   myname:{
//     type:String,
//     default:"张三"
//   }
// })
// defineProps 的 ts写法
// 没有默认值的ts写法
// let props=defineProps<{
//   myage?:number,
//   myname:string
// }>()
// 有默认值的 ts写法
let {myname="张三",myage=88}=defineProps<{
  myage?:number,
  myname:string
}>()
console.log(myname)
console.log(myage)

// defineEmits 的ts写法
// let emit=defineEmits(["sendMsg","sendData"])
let emits=defineEmits<{
  (e:"sendMsg",msg:string):void,
  (e:"sendData",data:any):void
}>()

// ts的 ?   ??  ! 
// ? 表示这个属性可有可无
// ?? 表示如果这个属性为空的话 就使用后面的值
// ! 表示这个属性一定有值  不为空
let res=reactive({
  total:98,
  list:[
    {name:"苹果",price:88,count:2},
    {name:"香蕉",price:66,count:1},
    {name:"西瓜",price:12,count:3}
  ],
  msg:"你好",
  proInfo:{
    city:"北京",
    pro:"上海"
  }
})
// ts ? 表示这个属性可有可无
console.log(res.proInfo?.city)
// ts ?? 表示如果这个属性为空的话 就使用后面的值
let total=res.total ?? 188

// ts ! 表示这个属性一定有值  不为空
console.log(res.proInfo!.pro)

onActivated(() => {
  console.log("组件被激活了")
})
onDeactivated(() => {
  console.log("组件被失活")
});
</script>